<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数字前后移动</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .move {
        height: 400px;
        width: 400px;
    }
    
    .ul_move {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .ul_move li {
        display: inline-block;
        line-height: 50px;
        /*height: 50px;*/
        text-align: center;
        width: 50px;
        margin: 20px 20px 0 0;
        background: #f00;
        color: #fff;
        font-size: 20px;
    }
</style>

<body>
    <div class="move">
        <button class="front_move" onclick="front()">向前移动</button>
        <button class="behind_move" onclick="behind()">向后移动</button>
        <ul class="ul_move">
            <!--<li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>-->
        </ul>
    </div>
</body>

</html>
<script>
    var arr=[1,2,3,4,5]
    var ul=document.querySelector('ul')
    var li
    move()
    function move(){
        arr.forEach(function(item,index){
        li=document.createElement('li')
        li.innerText=item
        ul.appendChild(li)
    })
    }
    function front(){
        a1=arr[0]
        arr.splice(0,1)
        arr.splice(4,0,a1)
        ul.innerHTML=''
        move()
    }
    function behind(){
        a1=arr[4]
        arr.splice(4,1)
        arr.splice(0,0,a1)
        ul.innerHTML=''
        move()
    }
</script>